import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    FileDoneOutlined,
    UploadOutlined,
    UserOutlined,
    VideoCameraOutlined,
    DashboardFilled
} from '@ant-design/icons';
import { Layout, Menu, theme, Space, MenuProps, Breadcrumb, Input } from 'antd';
import Item from 'antd/es/list/Item';
import React, { useEffect, useState } from 'react';
import { useNavigate, Outlet, NavLink, useLocation } from 'react-router-dom';
import classs from './Index.module.scss'
import useSectionStorage from '@/hooks/useSessionStorage';
type MenuItem = Required<MenuProps>['items'][number];
const { Header, Sider, Content } = Layout;
interface IRoute {
    path: string;
    name: string;
    children?: Array<{
        path: string;
        name: string;
    }>;
}
const menuRouteFormat = (
    label: React.ReactNode,
    key: React.Key,
    icon?: React.ReactNode,
    children?: MenuItem[]
) => ({
    key,
    icon,
    children,
    label
})
const menuRoutes: MenuItem[] = [
    menuRouteFormat('首页', '/index/home', <DashboardFilled />),
    menuRouteFormat('访客记录', '/visitor', <FileDoneOutlined />, [
        menuRouteFormat('访客列表', '/visitor/list'),
        menuRouteFormat('访客添加修改', '/visitor/addOrEdit'),
        menuRouteFormat('负责人操作导入详细', '/visitor/options'),
    ]),
]
const Index = () => {
    const navigator = useNavigate()

    const location = useLocation()
    const [collapsed, setCollapsed] = useState(false);
    // const [matches, setMatches] = useState(() => {
    //     return JSON.parse(window.sessionStorage.getItem('matches') as any)
    // })
    const [matches, setMatches] =  useSectionStorage('matches', [])
    const [ nickname, setNickname] = useSectionStorage('nickname', 'lisi')
    const [ show, setShow] = useSectionStorage('show', false)
    
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const itemRender = (route: IRoute, params: any, routes: any, paths: any) => {
        //    console.log('====',location, route, params, routes, paths)
        let len = routes.length
        const last = routes[len - 1].path === location.pathname ? true : false;
        // const last = routes.indexOf(route) === routes.length - 1;
        return last ? (
            <span>{route.name}</span>
        ) : (
            <NavLink to={route.path}>{route.name}</NavLink>
        );
    }
    // 页面开始加载的时候更新面包屑数据
    useEffect(() => {
        // let matche = JSON.parse(window.sessionStorage.getItem('matches') as any)
        setMatches(matches)
    }, [])
    // const [nickname, setnickname] = useSessionStorage('nickname', 'lisi')
    // setnickname('wangwu')
    // const [show, setShow] = useSessionStorage('show', 'false')
    // setShow(!show)
    // const handleFn1 = () => {
    //     window.sessionStorage.setItem('nickname', 'lisi')
    // }
    // const handleFn11 = () => {
    //     let nickname = window.sessionStorage.getItem('nickname')
    //     console.log(`%c======${JSON.stringify(nickname)}`, 'color:blue');
    // }
    // const handleFn2 = () => {
    //     window.sessionStorage.setItem('show', JSON.stringify(false))
    // }
    // const handleFn22 = () => {
    //     let show = window.sessionStorage.getItem('show')
    //     console.log(`%c======${JSON.stringify(show)}`, 'color:blue');

    // }
    // const handleFn3 = () => {
    //     let arr = [{ id: 1, name: 'zhangsan' }]
    //     let arr1 = window.sessionStorage.setItem('userInfo', JSON.stringify(arr))
    //     console.log(`%c======${JSON.stringify(arr1)}`, 'color:blue');

    // }
    
    // 自定义的hooks
    const handleFn1 = () => {
        setNickname('王五')
    }
    const handleFn2 = () => {
        console.log('handleFn2', nickname)
    }
    const handleFn3 = () => {
        setShow(!show)
    }
    return (

        <Layout>
            <Sider trigger={null} collapsible style={{
                position: 'fixed',
                height: '100vh'
            }} collapsed={collapsed}>
                <div className="logo" />
                <Menu
                    className={classs.menu}
                    defaultOpenKeys={['/index/home']}
                    defaultSelectedKeys={['/index/home']}
                    mode="inline"
                    theme="dark"
                    items={
                        menuRoutes
                    }
                    onSelect={(path: any) => {
                        let url = path.keyPath[0]
                        navigator(url)
                        setTimeout(() => {
                            let matche = JSON.parse(window.sessionStorage.getItem('matches') as any)
                            setMatches(matche)
                        }, 200);
                    }}
                />
            </Sider>
            <Layout className="site-layout" style={{ paddingLeft: collapsed ? '80px' : '200px' }}>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                >
                    <Space size={10}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: () => setCollapsed(!collapsed),
                        })}
                        {/* 面包屑 */}
                        <Breadcrumb itemRender={itemRender} routes={matches} />
                    </Space>
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        minHeight: '100vh',
                    }}
                >
                    {/* 路由出口  */}
                    {/* 演示，模块化修改第三方框架样式 */}
                    {/* <div className={classs.glInput} >
                        <Input placeholder="Basic usage" />
                    </div> */}
                    {/* <button onClick={handleFn1}>更改用户昵称</button>
                    <button onClick={handleFn11}>获取更新后的昵称</button>
                    <button onClick={handleFn2}>切换用户显示模式</button>
                    <button onClick={handleFn22}>显示目前的用户模式</button>
                    <button onClick={handleFn22}>显示目前的用户模式</button>
                    <button onClick={handleFn3}>存储数据类型为数组对象的数据</button> */}
                    
                    <button onClick={handleFn1}>用自定义的hook更新昵称</button>
                    <button onClick={handleFn2}>获取自定义的hook更新昵称</button>
                    <hr />
                    <button onClick={handleFn3}>更改全局show状态</button>
                    {
                     show ? <>根据全局状态显示内容</>: <>你没有相关权限</>
                    }
            
                    <Outlet></Outlet>

                </Content>
            </Layout>
        </Layout>

    );
};
export default Index;
